<template>
  <div :class="theme">
    <p>Window Width: {{ width }}px</p>
    <p>Device Type: {{ deviceType }}</p>
    <button @click="toggleTheme">Toggle Theme</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: window.innerWidth, // 窗口宽度
      theme: 'light', // 主题状态
    };
  },
  computed: {
    // 根据窗口宽度计算设备类型
    deviceType() {
      return this.width < 768 ? 'mobile' : 'desktop';
    },
  },
  methods: {
    // 更新窗口宽度
    updateWidth() {
      this.width = window.innerWidth;
    },
    // 切换主题
    toggleTheme() {
      this.theme = this.theme === 'light' ? 'dark' : 'light';
    },
  },
  mounted() {
    // 监听窗口 resize 事件
    window.addEventListener('resize', this.updateWidth);
  },
  unmounted() {
    // 移除事件监听
    window.removeEventListener('resize', this.updateWidth);
  },
};
</script>

<style>
.light {
  background-color: white;
  color: black;
}

.dark {
  background-color: black;
  color: white;
}
</style>